<template>
  <div>
    <div v-if="showBegin">开拍倒计时：{{hours | two}}:{{minutes | two}}:{{seconds | two}}</div>
    <div v-if="showUnderway">
      <div>定时报价：{{hours | two}}:{{minutes | two}}:{{seconds | two}}</div>
    </div>
    <div v-if="showDelay">
      <div>延时：{{hours | two}}:{{minutes | two}}:{{seconds | two}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CountTime",
  data() {
    return {
      //即将开始的倒计时 1分钟
      hours: 0,
      minutes: 0,
      seconds: 0,
      showBegin:true,
      showUnderway:false,
      flag:1,
      runUnderTime:true,
      showDelay:false,
      runDelay:true
    }
  },
  created() {
    //开拍倒计时
    this.countDown(0,0,10)
  },
  mounted() {
    window.onbeforeunload = function (e) {
      e = window.event || e;
      if (e){
        console.log(e)
        e.returnValue = "关闭提示";
      }
      this.toCloseFun()

      return '关闭提示'
    };
  },
  methods: {
    toCloseFun(){
      this.$alert('1')
    },
    countDown(h,m,s) {
      let time = window.setInterval( ()=> {
        if (h !== 0 && m === 0 && s === 0) {
          h -= 1
          m = 59
          s = 59
        } else if (m !== 0 && s === 0) {
          m -= 1
          s = 59
        } else if (s !== 0) {
          s -= 1
        } else {
          window.clearInterval(time)
          this.showBegin = false
          //只执行一次定时报价
          if (this.runUnderTime){
            this.underTime()
          }else{
            //执行延时
            if (this.runDelay){
              this.underTime2()
            }
            setTimeout(()=>{
              this.runDelay = false
            },800)
          }
          setTimeout(()=>{
            this.runUnderTime = false
          },800)
        }
        return this.seconds = s, this.minutes = m, this.hours = h
      }, 1000)
    },
    underTime(){
      setTimeout(()=>{
        this.showUnderway = true
        this.countDown(0,0,5)
      },800)
    },
    underTime2(){
      setTimeout(()=>{
        this.showUnderway = false
        this.showDelay = true
        this.countDown(0,0,20)
      },400)
    }
  },
  beforeDestroy() {
    window.clearInterval(this.timer)
  },
  destroyed() {
    window.clearInterval(this.timer)
  }
}
</script>

<style scoped>

</style>
